<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>drawing-area</title>
    <style type="text/css">
        div.pop-up {
            width: 256px;
            height: 128px;
            border: 1px solid #1a7dc4;
            box-shadow: 10px 10px 10px #9f9f9f;
            margin: 0 auto;
        }

        #dangerousArea {
            width: 595px;
            height: 397px;
            left: 0;
            top: 0;
            margin: 0;
        }

        #help {
            position: absolute;
            left: 8px;
            top: 8px;
            width: 597px;
            height: 399px;
            white-space: pre-wrap;
            font-size: 12px;
            line-height: 18px;
            background-color: #f0f0f0;
            color: red;
            user-select: none;
            z-index: 65536;
            margin: 0;
        }

        #coordListDiv {
            position: absolute;
            right: 0;
            top: 0;
            width: 420px;
        }

        #coordListDiv > div.areaBox {
            display: inline-block;
            background: #e0e0e2;
            width: 100%;
            margin-top: 10px;
        }

        #coordListDiv > div.areaBox > p {
            float: left;
            background-color: #0074e8;
            color: #ffffff;
            margin: 4px;
            /* padding: 4px; */
            width: 70px;
            text-align: center;
            line-height: 32px;
            font-family: Arial;
        }

        #btnsDiv {
            user-select: none;
        }

        #btnsDiv > div.groupDiv {
            background: #f0f0f0;
            margin-top: 4px;
            min-height: 33px;
            width: 420px;
        }

        #btnsDiv > div.groupDiv.generic > * {
            line-height: 24px;
            display: inline-block;
            height: 24px;
            vertical-align: middle;
        }

        #btnsDiv > div.groupDiv.btns > * {
            float: left;
            margin: 4px;
        }

        #btnsDiv > div.groupDiv.btns > label {
            line-height: 24px;
        }

        #btnsDiv > div.groupDiv.btns > button {
            background-color: rgb(238, 0, 0);
            border: none;
            padding: 0;
            width: 64px;
            height: 24px;
            border-radius: 4px;
            color: #fff;
        }

    </style>
</head>
<body>
<!--弹出式面板-危险区域-->
<div id="dangerousArea" class="pop-up"></div>
<pre id="help" style="visibility: hidden">说明：</pre>
<div id="btnsDiv" style="position: absolute;right: 10px;top: 10px;">
    <div class="groupDiv generic">
        <label>开关：</label>
        <input type="checkbox" checked name="kg" id="kg_showInfo" onclick="execAction(this)"><label
            for="kg_showInfo">信息</label>
        <input type="checkbox" checked name="kg" id="kg_showGridlines" onclick="execAction(this)"><label
            for="kg_showGridlines">网格线</label>
        <input type="checkbox" checked name="kg" id="kg_showCenterline" onclick="execAction(this)"><label
            for="kg_showCenterline">中心线</label>
        <input type="checkbox" checked name="kg" id="kg_showAuxiliaryLine" onclick="execAction(this)"><label
            for="kg_showAuxiliaryLine">辅助线</label>
        <input type="checkbox" checked disabled name="kg" id="kg_allowStacking" onclick="execAction(this)"><label
            for="kg_allowStacking">堆叠</label>
    </div>
    <div class="groupDiv btns">
        <label>函数：</label>
        <button type="button" id="hs_showHelp" onclick="execAction(this)">打开帮助</button>
        <button type="button" id="hs_centerImage" onclick="execAction(this)">居中图像</button>
        <button type="button" id="hs_asMoveMode" onclick="execAction(this)" style="background-color: #0074e8;">移动模式
        </button>
        <button type="button" id="hs_asDrawMode" onclick="execAction(this)">绘制模式</button>
        <button type="button" id="hs_getCoords" onclick="execAction(this)">获取坐标</button>
    </div>
</div>
<div id="coordListDiv" style="position: absolute;right: 0;top: 80px;">
</div>
</body>
<script src="3rd/common-pure.js"></script>
<script src="3rd/canvas-helper.js"></script>
<script src="drawing-area.js"></script>
<script>
    //按钮点击效果
    document.querySelectorAll('#btnsDiv > div.groupDiv.btns > button').forEach(btn => {
        btn.style.transition = 'scale 0.1s';
        btn.addEventListener('click', function (event) {
            this.style.scale = '0.5';
            setTimeout(() => this.style.scale = '', 100);
        });
    });
    //定义绘制区域对象（该对象对调用者提供基本操作函数）
    let daDanger;
    //安装绘制区域
    DrawingArea.init({
        container: document.getElementById('dangerousArea'),
        imageUrl: 'img/example.png',
        imageUrl: 'img/C10皮带机头.jpg',
        imageUrl: 'img/东围墙4.jpg',
        imageUrl: 'img/small.png',
        imageUrl: 'img/C10皮带机头2.png',
        mode: 'move',
        maxArea: 3,
        showInfo: document.getElementById('kg_showInfo').checked,
        showGridlines: document.getElementById('kg_showGridlines').checked,
        showCenterline: document.getElementById('kg_showCenterline').checked,
        showAuxiliaryLine: document.getElementById('kg_showAuxiliaryLine').checked,
        allowStacking: document.getElementById('kg_allowStacking').checked,
        // centerImage: false,
        // coordList: s2j('[["317,267","220,388","309,401","390,264"],["554,275","590,414","697,391","612,253"]]'),//坐标列表
        coordList: s2j('[["522,183","612,540","771,540","563,182"]]'),//坐标列表
        whenReady: instance => {
            daDanger = instance;
            let coords = daDanger.getCoords();
            log('whenReady', coords);
            // daDanger.moveToCentral();
            document.getElementById('help').textContent += daDanger.help();
        },
        whenCreateCoord: (areaIndex, x, y) => {
            let coordListDiv = document.getElementById('coordListDiv');
            let areaBoxList = coordListDiv.querySelectorAll('div.areaBox');
            let areaBox = areaBoxList[areaIndex];
            if (areaBox == undefined) {
                areaBox = dce('div');
                addClass(areaBox, 'areaBox');
                coordListDiv.appendChild(areaBox);
            }
            // 创建坐标
            let coord = dce('p');
            coord.textContent = x + ',' + y;
            areaBox.appendChild(coord);
        },
        whenCompleted: () => {
            log('whenCompleted', daDanger.getCoords());
        }
    });

    //执行动作
    function execAction(domObj) {
        let id = domObj.id;
        let txt = domObj.textContent;
        if (id == 'kg_showInfo') {
            if (domObj.checked) {
                daDanger.enableInfoPanel();
            } else {
                daDanger.disableInfoPanel();
            }
        } else if (id == 'kg_showGridlines') {
            if (domObj.checked) {
                daDanger.enableGridPanel();
            } else {
                daDanger.disableGridPanel();
            }
        } else if (id == 'kg_showCenterline') {
            if (domObj.checked) {
                daDanger.enableCenterPanel();
            } else {
                daDanger.disableCenterPanel();
            }
        } else if (id == 'kg_showAuxiliaryLine') {
            if (domObj.checked) {
                daDanger.enableAuxiliaryPanel();
            } else {
                daDanger.disableAuxiliaryPanel();
            }
        } else if (id == 'mode_move') {
            daDanger.asMoveMode();
        } else if (id == 'mode_draw') {
            daDanger.asDrawMode();
        } else if (id == 'hs_showHelp') {
            let help = document.getElementById('help');
            if (help.style.visibility == 'hidden') {
                help.style.visibility = 'visible';
                domObj.textContent = '关闭帮助';
            } else {
                help.style.visibility = 'hidden';
                domObj.textContent = '打开帮助';
            }
        } else if (id == 'hs_centerImage') {
            daDanger.moveToCentral();
        } else if (id == 'hs_asDrawMode') {
            daDanger.asDrawMode();
        } else if (id == 'hs_asMoveMode') {
            daDanger.asMoveMode();
        } else if (id == 'hs_getCoords') {
            let coords = daDanger.getCoords();
            log(coords, j2s(coords));
            alert(j2s(coords));
        }
    }

    // daDanger.extract();//cloneNode()为什么做不到呢？
</script>
</html>
